<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大风车</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.imga{
				animation: dfc .8s linear infinite;
			}
			
			/* 关键帧 */
			@keyframes dfc{
				0%{
					transform: rotate(180deg) ;
				}
				30%{
					transform: rotate(350deg); 
				}
				100%{
					transform: rotate(720deg) ;
				}
			}
			.imgb{
				animation: dfc1 .8s linear infinite;
			}
			@keyframes dfc1{
				0%{
					transform:translate(50px) rotateX(180deg) ;
				}
				30%{
					transform:translate(900px) rotateX(350deg); 
				}
				100%{
					transform:translate(2000px) rotateX(720deg) ;
				}
			}
			
		</style>
	</head>
	<body>
		<img src="../img/2.gif" alt="1"  />
		<audio src="../img/dafengche.mp3" autoplay></audio>
		<button id="btn1">开转</button>
		<button id="btn2">暂停</button>
		<button id="btn3">翻转</button>
		<script>
			//点击  开转 图片
			$("#btn1").click(function(){
				$("img").attr("src","../img/dfc.jpg").addClass("imga");
			});
			//暂停  音乐消失+动画效果消失？
			$("#btn2").click(function)(){
			    $("audio").removeAttr("src");
			    $("img").removeClass("imga");
			});
			//翻转   切换   imga  切换  imgb
			 $("#btn3").click(function)(){
			     $("img").toggleClass("imgb");
				 $("audio").attr("src","../img/dafengche.mp3");
			 });
		</script>
	</body>
</html>